iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
Vue.js

這是我的 Vue.js 筆記,不知道有沒有機會幫到你系列 第 7

我的 Vue.js 筆記(7) - Vue 的實體與響應式狀態定義

  • 分享至 

  • xImage
  •  

前言

標題又出現了一個看起來很難懂的專有名詞:狀態。

這篇文章來聊聊 Vue 的「狀態」是什麼意思。

在開始說狀態之前,先簡單說一下 setup() 生命週期鉤子。

setup()

再把那個最初的範例請出來

Vue.createApp({
    setup() {
        const message = '一段文字'
        return { message }
    },
}).mount("#app");

還記得之前把 createApp 比喻成製造機器人的函式,就如同我們熟知的「掃地機器人」、「洗衣機(器人)」,如果要使用它,通常都會有些按鈕、介面讓我們操作,在 Vue 的世界,setup() 就類似於這些按鈕介面的腳色。

setup() 函式,是用來啟動每一個 Vue 元件的「進入點」,我們對每個元件做的「操作」都會寫在這裡進行。
像是元件的狀態、方法、計算屬性(computed)、監聽器(watch),還有元件的生命週期鉤子,都會在 setup() 函式內撰寫。

使用 setup() 宣告的資料、方法,記得要 return 出來,才能在模版中使用,否則會報錯。

Vue 的狀態

在 Vue 的世界,可以做到「資料」、「畫面」分離,所以只要管理好「資料」就等同於控管好 Vue 應用程式。

於是我們就可以說,會影響到應用程式運作的「狀態」的東西,就是那些「資料」。

「資料」又是怎麼來的?這就會是我們在每個元件宣告的「變數」了。

總結來說,在 Vue 的世界如果聽到「狀態」,其實就是在講 「資料」,在講「變數」。

之後會提到「Vue 狀態管理」的議題,就是在說如何管理 Vue 應用程式的「變數」了。

ref()

在 Composition API 的語法中,如果要宣告變數,Vue 官方推薦使用 ref() 函式來讓定義「響應式」的資料。

此時的你可能很困惑,我們之前不是已經把資料與畫面綁定了嗎?
事實上之前的例子只會做到「單次」的綁定,如果資料被更動之後,並不會 重新渲染 到畫面上,例如這個例子

const { createApp, ref } = Vue;
const app = createApp({
  setup() {
    let count = 0;
    const plus  = () => {
      count++;
      console.log(count);
    }
    return {
      count,
      plus
    }
  },
})
app.mount("#app");

即使我們已經寫好 function 讓 count +1, console 出來的變數也確實已經 +1,代表資料確實有被 +1,但畫面的資訊始終沒有更動。

因為 Vue 的 Composition API,並沒有把「寫死」的變數處理成「響應式資料」。

為此我們必須透過 ref() 函式來將資料包覆起來,讓資料與畫面達到響應的效果。

使用上有幾點要注意:

  1. refcreateApp 一樣,是 Vue 物件提供的方法,必須寫 Vue.ref() 來使用,或是直接解構出來用。

  2. 透過 ref() 包覆的資料,如果在「程式中」要拿來用,必須使用 變數.value 來操作,這是 Vue 定義的規則。

  3. 定義為 ref() 的變數資料,如果要渲染在模版中,可以 不用 寫成 變數.value ,只需要在雙大括號寫變數即可:{{ 變數名稱 }},Vue 會自動幫我們解構。

  4. 由於定義的資料已經被 Vue 「封裝」起來,操作 ref() 的 變數.value 已經不會單純的「更改變數值」,所以宣告變數時可以直接使用 const

  5. 只要是 JS 的資料型別,都可以放到 ref() 函式內。例如:StringNumberBooleanArrayObject

<div id="app" >
    {{ count }}

    <button @click="plus">點選讓數字加一</button>
</div>
const { createApp, ref } = Vue;
const app = createApp({
    setup() {
    // 定義 ref 資料要用的變數,可以使用 const
    const count = ref(0);
    const plus  = () => {
        // 以 ref 定義的資料,要用 [變數.value] 操作資料
        count.value++;
        console.log(count.value);
    }
    return {
        count,
        plus
    }
    },
})
app.mount("#app");

上面的程式可以到 這裡 玩玩看

題外話:如果有新手訝異為什麼提供的連結不用引入 CDN 就可以寫 Vue ,其實還是有引入,只是引入點是這個平台提供的,不是直接寫 script 引入:

ref 與 reative

如果你有聽到有人在討論 ref()reative() 之間的選擇。
直接說結論:無腦 ref() 用下去即可。

根據尤雨溪大大的說法,reative() 其實是為了那些已經習慣 Vue2 語法的開發者定義出來的函式。
如果對語法有興趣,可以參考官網的說明

官方目前已建議直接使用 ref(),不用特別去比較這兩者的差異。

不過還是要說,這兩個寫法都還是很常見,沒有誰被棄用的問題,如果有看到同事或是同學在寫 reative() 也不要隨便嗆人家跟不上時代,我們要尊重包容理性和平!

尤雨溪大大也提到說,這兩個東西的用法,團隊成員約定好即可,詳細的內容,大家可以直接聽 尤雨溪大大的說明


上一篇
我的 Vue.js 筆記(6) - Vue 的核心與實體(Instance)
下一篇
我的 Vue.js 筆記(8) - Vue 元件實體生命週期
系列文
這是我的 Vue.js 筆記,不知道有沒有機會幫到你30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言